<template>
    <div class="sub-category">
        <div class="container">
            <!-- 面包屑 -->
            <el-breadcrumb separator=">" style="height:50px;line-height:50px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: `/category/${subCategory.parentId}` }">{{ subCategory.parentName }}
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ subCategory.name }}</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 筛选区 -->
            <div class="sub-filter">
                <div class="item" v-for="item in subCategory.saleProperties" :key="item.id">
                    <div class="head">{{ item.name }}：</div>
                    <div class="body">
                        <a href="javascript:;" class="active">全部</a>
                        <a href="javascript:;" v-for="subitem in item.properties" :key="subitem.id">{{ subitem.name
                        }}</a>
                    </div>
                </div>
            </div>
            <!-- 商品区域 -->
            <div class="goods-list">
                <!-- 排序区域 -->
                <div class="sub-sort">
                    <div class="sort">
                        <a href="javascript:;" class="active">默认排序</a>
                        <a href="javascript:;">最新商品</a>
                        <a href="javascript:;">最高人气</a>
                        <a href="javascript:;">评论最多</a>
                        <a href="javascript:;">
                            价格排序
                            <i class="arrow up"></i>
                            <i class="arrow down"></i>
                        </a>
                    </div>
                </div>
                <!-- 商品列表 -->
                <ul>
                    <li v-for="goods in subCategory.goods" :key="goods.id">
                        <GoodsItem :goods="goods"></GoodsItem>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup name="SecondCategory">
import { ref, watch } from 'vue'
import { ApiRes } from '@/types/data'
import { SecondCategory } from '@/types/category'
import request from '@/utils/request'
import { useRoute } from 'vue-router'
import GoodsItem from './components/goods-item.vue'
const route = useRoute()
const subCategory = ref({} as SecondCategory)

const getSecondCategory = async () => {
    const res = await request.get<ApiRes<SecondCategory>>(
        `category/sub/filter?id=${route.params.id}`
    )
    subCategory.value = res.data.result
}

watch(
    () => route.params.id,
    () => {
        if (route.fullPath === `/category/sub/${route.params.id}`) {
            getSecondCategory()
        }
    },
    { immediate: true }
)
</script>
  
<style scoped lang="less">
// 筛选区
.sub-filter {
    background: #fff;
    padding: 25px;

    .item {
        display: flex;
        line-height: 40px;

        .head {
            width: 80px;
            color: #999;
        }

        .body {
            flex: 1;

            a {
                margin-right: 36px;
                transition: all 0.3s;
                display: inline-block;

                &.active,
                &:hover {
                    color: @xtxColor;
                }
            }
        }
    }
}

.goods-list {
    background: #fff;
    padding: 0 25px;
    margin-top: 25px;

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;

        li {
            margin-right: 20px;
            margin-bottom: 20px;

            &:nth-child(5n) {
                margin-right: 0;
            }
        }
    }

    .sub-sort {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .sort {
            display: flex;

            a {
                height: 30px;
                line-height: 28px;
                border: 1px solid #e4e4e4;
                padding: 0 20px;
                margin-right: 20px;
                color: #999;
                border-radius: 2px;
                position: relative;
                transition: all 0.3s;

                &.active {
                    background: @xtxColor;
                    border-color: @xtxColor;
                    color: #fff;
                }

                .arrow {
                    position: absolute;
                    border: 5px solid transparent;
                    right: 8px;

                    &.up {
                        top: 3px;
                        border-bottom-color: #bbb;

                        &.active {
                            border-bottom-color: @xtxColor;
                        }
                    }

                    &.down {
                        top: 15px;
                        border-top-color: #bbb;

                        &.active {
                            border-top-color: @xtxColor;
                        }
                    }
                }
            }
        }

        .check {
            .xtx-checkbox {
                margin-left: 20px;
                color: #999;
            }
        }
    }
}
</style>
  